<template>
  <div class="login-container">
    <!-- el-form表单组件
      每个表单项都必须使用el-from-item 组件包裹
      model 表单数据对象
       -->
    <!-- 配置from表单验证： -->
    <!-- 1.必须el-form表单绑定model为表单数据对象 
       2.给需要验证的表单项el-from-item绑定prop属性,prop属性需要指定表单对象中的数据名称
       3.通过el-from组件的rules属性配置验证规则
       -->
    <!-- 手动触发表单验证 
       1.给el-from设置ref起个名字
       2.通过ref获取el-form组件，调用组件的validate进行验证
       -->
    <el-form
      class="login-form"
      ref="login-from"
      :model="user"
      :rules="formRules"
    >
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree">
          我以阅读并同意用户协议和隐私条款
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button
          class="login-btn"
          type="primary"
          :loading="loginLoading"
          @click="onLogin"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 登录请求模块导入
import { login } from "@/api/user";
export default {
  name: "loginIndex",
  data() {
    return {
      user: {
        mobile: "13911111111", // 手机号
        code: "246810", // 验证码
        agree: false, // 是否同意协议
      },
      // checked: false, // 条款的选中状态
      loginLoading: false, // 登录的loading状态
      formRules: {
        // 表单验证规则配置
        // 要验证的数据名称： 规则列表[]
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "change" },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "手机号码格式错误",
            trigger: "change",
          },
        ],
        code: [
          { required: true, message: "验证码不能为空", trigger: "change" },
          {
            pattern: /^\d{6}$/,
            message: "请输入正确的验证码格式",
            trigger: "change",
          },
        ],
        agree: [
          {
            // 自定义校验规则
            // 验证通过：callback()
            // 验证失败：callback(new Error(''))
            validator: (rule, value, callback) => {
              if (value) {
                callback();
              } else {
                callback(new Error("请同意用户协议"));
              }
            },
          },
        ],
      },
    };
  },
  methods: {
    onLogin() {
      // 获取表单数据（根据接口要求绑定数据
      // const user = this.user
      // 表单验证
      // validate方法是异步的
      this.$refs["login-from"].validate((valid) => {
        //    如果表单验证失败，停止请求提交
        if (!valid) {
          return;
        }
        // 通过验证，提交登录
        this.login();
      });
    },
    // login(){
    //   this.$request({
    //     method:'POST',
    //     url:'/mp/v1_0/authorizations',
    //     data:this.user
    //   }).then(res=>{
    //     this.$message({
    //       message:'登陆成功',
    //       type:'success'
    //     })
    //   }).catch(err=>{
    //     this.$message({
    //       message:'登陆失败',
    //       type:'info'
    //     })
    //   })
    // }
    login() {
      this.loginLoading = true;
      login(this.user)
        .then((res) => {
          console.log(res);
          this.$message({
            message: "登陆成功",
            type: "success",
          });
          this.loginLoading = false;
          // 将接口返回的用户相关数据存放到本地存储，方便数据共享
          // 本地存储只能存储字符串
          // 如果需要存储数组，对象，则需要把他们转换为JSON格式字符串进行存储
          window.localStorage.setItem('user',JSON.stringify(res.data.data))
          // 跳转到首页
          this.$router.push({
            name: "home",
          });
        })
        .catch((err) => {
          console.log("登陆失败", err);
          this.$message.error("登录失败，手机号或验证码错误");
          this.loginLoading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../assets/loginImg/bg.jpg") no-repeat;
  background-size: cover;
  .login-form {
    padding: 50px;
    background-color: #fff;
    border-radius: 4px;
    min-width: 300px;
    .login-btn {
      width: 100%;
    }
  }
}
</style>
